<template>
	<view class="page-main" v-show="info.askTitle">
		<image :src="info.askPic" class="bnn" mode="widthFix"></image>
		<!-- <image class="wcann" src="../../../static/wc.png" mode=""></image> -->
		<view class="name">
			{{info.askTitle || ''}}
		</view>
		<rich-text :nodes="info.askContent"></rich-text>
		<view class="" v-for="(item,index) in info.taskQuestionList">
			<view class="title" :class="{'required': item.questionType!= 'input'}">
				{{index + 1}}.{{item.question}}
			</view>
			<radio-group v-if="item.questionType == 'radio'" class="ul flex flex-wrap" :name="item.autoId"
				@change="(e)=>radioChange(e, item)">
				<label class="li" v-for="cur in item.answerList">
					<radio :value="cur.answerId" /><text>{{cur.answer}}</text>
				</label>
			</radio-group>
			<textarea name="" v-if="item.questionType == 'input'" id="" cols="30" rows="6"
				@input="(e) => questionIpt(e, item)"></textarea>
			<checkbox-group v-if="item.questionType == 'check'" class="ul flex flex-wrap" :name="item.autoId"
				@change="(e) => checkBoxChange(e, item)">
				<label class="li" v-for="cc in item.answerList">
					<checkbox :value="cc.answerId" /><text>{{cc.answer}}</text>
				</label>
			</checkbox-group>
		</view>
		<button style="margin: 30rpx 0 0;" type="primary" @click="submit">提交问卷</button>
		<Loading ref="loading"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/loding.vue'
	export default {
		data() {
			return {
				info: {},
				answerList: [],
				userInfo: null,
			};
		},
		components:{
			Loading
		},
		computed: {
			answerIds() {
				return this.answerList.map(item => item.questionId);
			}
		},
		onLoad(e) {
			this.$nextTick(() => {
				this.$refs.loading.init()
				this.$request('/api/hlx-question/questionDetail', {askId:e.scene}, 'get').then(res => {
					this.info = res.data.data[0]
					this.$refs.loading.destoryed()
				})
			})
		},
		methods: {
			transformToData(item) {
				if (!this.userInfo) {
					const userInfo = uni.getStorageSync("userInfo");
					this.userInfo = JSON.parse(userInfo);
				}
				return {
					askId: item.askId,
					questionId: item.questionId,
					answer: item.answerId,
					userOpenId: this.userInfo.openId,
				}
			},
			radioChange(e, item) {
				const ans = item.answerList.find(_item => _item.answerId === e.detail.value);
				let idx = this.answerIds.indexOf(item.questionId);
				if (idx > -1) {
					this.answerList.splice(idx, 1, this.transformToData({
						...ans,
						// userAnswerId: ans.answerId
					}));
				} else {
					this.answerList.push(this.transformToData({
						...ans,
						// userAnswerId: ans.answerId,
					}));
				}
			},
			checkBoxChange(e, item) {
				const ans = item.answerList.filter(_item => e.detail.value.includes(_item.answerId));
				this.answerList = this.answerList.filter(_item => _item.questionId != item.questionId);
				this.answerList.push(...ans.map(_item => this.transformToData(({
					..._item,
					// userAnswerId: _item.answerId,
				}))));
			},
			questionIpt(e, item) {
				const idx = this.answerList.findIndex(_item => _item.questionId === item.questionId);
				const answer = e.detail.value;
				if (idx > -1) {
					const ans = this.answerList[idx];
					ans.answer = answer;
					this.answerList.splice(idx, 1, ans);
				} else {
					this.answerList.push(this.transformToData({
						...item,
						answerId: answer,
					}))
				}
			},
			submit() {
				console.log(this.answerList);
				// 所有的问题，除了输入框的
				const allQuestionIds = this.info.taskQuestionList.filter(item => item.questionType !== 'input').map(item =>
					item.questionId);

				// 所有已经填写了的问题，有重复，无所谓
				const allAnsweredQuestionIds = this.answerList.map(item => item.questionId);

				console.log(allQuestionIds, allAnsweredQuestionIds);
				if (!allQuestionIds.every(item => {
						return allAnsweredQuestionIds.includes(item)
					})) {
					uni.showToast({
						icon: 'none',
						title: "请填写必填项",
					})
					return;
				}
				this.$request('/api/hlx-question/add', this.answerList, 'post').then(res => {
					if (res.data.code === 200) {
						// uni.showToast({
						// 	title: res.data.msg,
						// });
						// setTimeout(() => {
						// 	uni.navigateBack();
						// }, 2000);
						uni.showModal({
							title:'提示',
							content:'提交成功，感谢您的反馈！',
							showCancel:false,
							success(res) {
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}
						})
					} else {
						uni.showToast({
							icon:"error",
							title: res.data.msg,
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		background: rgb(3, 128, 188);
	}

	.page-main {
		padding: 0 30rpx 30rpx;
		position: relative;

		.name {
			font-size: 32rpx;
			text-align: center;
			font-weight: bold;
			margin: 30rpx 0;
		}

		.cont {
			line-height: 60rpx;
		}
	}

	.bnn {
		width: 100%;
		height: 0;
	}

	.wcann {
		width: 106rpx;
		height: 96rpx;
		position: absolute;
		top: 20rpx;
		left: 50rpx;
	}

	.color {
		color: rgb(221, 165, 112);
	}

	.title {
		font-size: 32rpx;
		margin: 60rpx 0 20rpx;
		font-weight: bold;
	}

	.required {
		&:before {
			content: '*';
			color: red;
			margin-right: 10rpx;
		}
	}

	.li {
		width: 50%;
		margin: 20rpx 0;
		font-size: 28rpx;
		display: flex;
		align-items: center;

		radio,
		checkbox {
			transform: scale(0.7);
		}
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	textarea {
		background: #f2f2f2;
		border-radius: 8rpx;
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}
</style>